<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>
				<form-item-title text="个人信息"></form-item-title>
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">本人照片</text>
							<u-upload ref="fileref" :header="header" :action="action" @on-success="successPhoto"
								@on-remove="removePhoto" height="80" width="120" max-count="1"></u-upload>
						</view>
						<u-form-item label="真实姓名"><u-input input-align="right" v-model="formdata.name" /></u-form-item>
						<u-form-item label="性别"><u-input :disabled="true" input-align="right" @click="showSex = true"
								v-model="sexlabel" type="select" /></u-form-item>
						<u-form-item label="年龄"><u-input type="number" input-align="right" v-model="formdata.age" /></u-form-item>
					</u-form>
				</view>
			</view>
			<form-item-title text="专业信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="全职/兼职" :label-style="labelStyle"><u-input :disabled="true" type="select"
							input-align="right" @click="showjobType = true" v-model="joblabel" /></u-form-item>
					<view class="flex-row justify-between items-center group_5">
						<view class="font_2 text_3">既往作品<text class="font_4" style="font-size: 24rpx;">(限3张，可上传视频)</text></view>
						<!-- 						<text class="font_4">已上传</text> -->
					</view>

					<u-upload ref="zuopinref" :header="header" :action="action" max-count="3" upload-text="作品"
						@on-success="successZuopin" @on-remove="removeZuopin"></u-upload>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="备注" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.remark" />
					</u-form-item>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="form-box">
				<view class="flex-row justify-between items-center group_16">
					<view class="flex-col button_3">
						<text class="self-start font_3 text_28">服务费用</text>
						<view class="flex-row items-center self-stretch section_11 mt-7">
							<text class="text_31">￥</text>
							<input class="ml-2 text_30" type="digit" :value="formdata.fees" @input="changeInput"></input>
							<text>/课时</text>
						</view>
					</view>
					<view class="flex-col justify-start items-center button_4" @click="addTeacher"><text
							class="font text_29">立即发布</text></view>
				</view>
			</view>
		</view>
		<u-select v-model="showSex" mode="single-column" :list="sexlist" @confirm="handlesexconfirm"></u-select>
		<u-select v-model="showjobType" mode="single-column" :list="jobTypeList" @confirm="handlejobconfirm"></u-select>
	</view>
</template>

<script>
import formItemTitle from 'components/index/form-item-title.vue'
import petschool from '../../../../api/petSchool.js'
import utils from '../../../../utils/util.js'
export default {
  data() {
    return {
      list: [
        '温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。',
      ],
      action: this.$config.mobeilURL + '/common/uploadFile', // 演示地址
      labelStyle: {
        fontWeight: 'bold',
        fontSize: '28rpx',
        whiteSpace: 'nowrap',
      },
      fileList: [],
      zuopinList: [],
      formdata: {
        photo: '',
        workInfo: '',
        name: '',
        gender: '',
        age: '',
        jobType: '',
        fees: 0.0,
        remark: '',
        lat: 0,
        lng: 0,
      },
      showSex: false,
      sexlist: [
        {
          value: '男',
          label: '男',
        },
        {
          value: '女',
          label: '女',
        },
      ],
      sexlabel: '',
      showjobType: false,
      jobTypeList: [
        {
          value: 0,
          label: '全职',
        },
        {
          value: 1,
          label: '兼职',
        },
      ],
      joblabel: '',
      header: {
        'content-type': 'multipart/form-data',
        Authorization: uni.getStorageSync('cxbtoken'),
      },
    }
  },
  onLoad() {
    utils.getLocationInfo().then((res) => {
      this.formdata.lat = res.latitude
      this.formdata.lng = res.longitude
    })
  },
  methods: {
    successPhoto(data, index) {
      if (data.code !== 200) {
        this.$refs.fileref.lists[index].error = true
      } else {
        this.fileList.push(data.accessPath)
        this.formdata.photo = data.accessPath
      }
    },
    removePhoto(index) {
      this.fileList.splice(index, 1)
    },
    handlesexconfirm(val) {
      this.formdata.gender = val[0].value
      this.sexlabel = val[0].label
    },
    handlejobconfirm(val) {
      this.formdata.jobType = val[0].value
      this.joblabel = val[0].label
    },
    successZuopin(data, index) {
      if (data.code !== 200) {
        this.$refs.zuopinref.lists[index].error = true
      } else {
        this.zuopinList.push(data.accessPath)
      }
    },
    removeZuopin(index) {
      this.zuopinList.splice(index, 1)
    },
    changeInput(e) {
      this.formdata.fees = e.detail.value
    },
    addTeacher() {
      this.formdata.lng = `${this.formdata.lng}`
      this.formdata.lat = `${this.formdata.lat}`
      this.formdata.workInfo = this.zuopinList.join(',')
      uni.showLoading({
        title: '发布中',
      })
      petschool
        .addPetTeacher(this.formdata)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            uni.showToast({
              title: '发布成功',
              icon: 'none',
            })
            uni.navigateBack()
          } else {
            uni.showToast({
              title: '发布失败',
              icon: 'error',
            })
          }
        })
        .catch((err) => {
          uni.hideLoading()
          uni.showToast({
            title: '发布失败',
            icon: 'error',
          })
        })
    },
  },
  components: {
    formItemTitle,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;

  .content-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .notice-box {
      padding: 24rpx;
    }

    .form-box {
      padding: 0 32rpx;
      margin-bottom: 40rpx;

      .group_6 {
        padding: 32rpx 0;
        border-bottom: solid 2rpx #f3f3f3;

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.76rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_7 {
          line-height: 26.02rpx;
        }

        .image-wrapper {
          background-color: #ececec;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 100rpx;
          font-size: 30px;
          color: #999999;
        }
      }
    }

    .group_5 {
      padding: 40rpx 0;
      border-bottom: solid 2rpx #f3f3f3;

      .font_2 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.18rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_3 {
        line-height: 25.7rpx;
      }

      .font_4 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 20.78rpx;
        font-weight: normal;
        color: #999999;
      }
    }
  }

  .bottom-box {
    padding: 16rpx 0;
    background: #ffffff;
    box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .mt-7 {
      margin-top: 14rpx;
    }

    .group_16 {
      padding-left: 36rpx;
      padding-right: 28rpx;

      .button_3 {
        width: max-content;

        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.4rpx;
          font-weight: 700;
          color: #666666;
        }

        .text_28 {
          color: #000000;
        }

        .section_11 {
          padding: 6rpx 20rpx;
          background-color: #f6f6f6;
          border-radius: 60rpx;

          .text_31 {
            color: #000000;
            font-size: 24rpx;
            line-height: 17.72rpx;
          }

          .text_30 {
            color: #ff7676;
            font-size: 40rpx;
            line-height: 28.48rpx;
            width: 180rpx;
          }
        }
      }

      .button_4 {
        padding: 28rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        width: 318rpx;
        height: 84rpx;

        .font {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 30.02rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_29 {
          line-height: 29.88rpx;
        }
      }
    }
  }

  /deep/.u-upload {
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  /deep/ .u-add-tips {
    display: none;
  }
}
</style>